<template>
    <!-- 订阅 -->
    <div class="subscribe ml layout-v ">
        <div v-if="subscribeState==1">已订阅</div>
        <form v-if="subscribeState==0" action="" class="width-p-100 form-1">
            <div class="row title">
                <div class=" text-center">胎教订阅</div>
            </div>
            <div class="row layout-h layout-v">
                <label for="">
                    每天推送时间：
                </label>
                <div class="input">
                    <datetime v-model="pushTime" @on-change="pushTimeChange" format="HH:mm" placeholder="请选择"></datetime>
                </div>
            </div>

            <div class="row layout-h ">
                <label for="">
                    末次月经的第一天：
                </label>
                <div class="input ">
                    <datetime v-model="last_menstrual_day" @on-change="pushLastMenstrualDayChange" format="YYYY-MM-DD" placeholder="请选择"></datetime>
                </div>
            </div>

            <div class="row">
                <button type="button" :disabled="disabled" @click="subscribe" class="btn submit">
                    订阅
                </button>
            </div>
        </form>
    </div>
</template>
<script>
    import Vue from 'vue'
    import axios from 'axios'
    import Vueaxios from 'vue-axios'
    Vue.use(Vueaxios, axios)
    import {
        Datetime,
        Group
    } from 'vux'
    export default {
        title: '胎教订阅',
        data () {
            return {
                pushTime: '20:30',
                last_menstrual_day: '',
                subscribeState: null,
                disabled: true
            }
        },
        components: {
            Datetime,
            Group
        },
        methods: {
            pushLastMenstrualDayChange () {
                if (this.pushTime && this.last_menstrual_day) {
                    this.disabled = false
                }
            },
            pushTimeChange () {
                if (this.pushTime && this.last_menstrual_day) {
                    this.disabled = false
                }
            },
            /**
             * 获取胎教信息
             */
            getPregnancyInfo () {
                axios
                    .get(
                        this.host +
                        `/api/getPregnancyInfo/${this.$store.getters.getPageParams.openid}`
                    )
                    .then(
                        res => {
                            console.log(res)
                        },
                        err => {
                            console.error(err)
                        }
                    )
            },
            /**
             * 订阅胎教信息
             */
            subscribe () {
                axios({
                    method: 'post',
                    url: this.host + '/api/taijiao/subscribe',
                    headers: {
                        'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
                    },
                    data: this.urlEncode({
                        openid: this.$store.getters.getPageParams.openid,
                        pushTime: this.pushTime.replace(':', ''), // 格式：4位数字，早上9点23：0923
                        last_menstrual_day: this.last_menstrual_day.replace(/-/g, '') // 8位数字，如：20180301
                    }).replace(/^\\&/, '')
                }).then(
                    res => {
                        if (res.data === 'ok') {
                            alert('订阅成功')
                            this.subscribeState = 1
                        }
                    },
                    err => {
                        console.error(err)
                    }
                )
            },
            /**
             * 获取订阅状态
             * 1：已订阅
             * 0：未订阅
             */
            subscribe_state () {
                axios({
                    method: 'post',
                    url: this.host + '/api/taijiao/subscribe_state',
                    headers: {
                        'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
                    },
                    data: this.urlEncode({
                        openid: this.$store.getters.getPageParams.openid
                    }).replace(/^\\&/, '')
                }).then(res => {
                    this.subscribeState = res.data
                    this.getPregnancyInfo()
                })
            }
        },
        mounted () {
            // 获取订阅状态
            this.subscribe_state()
        }
    }
</script>
